<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head th:replace="common/head :: head"></head>
<body>
	<!-- HEADER -->
	<header th:fragment="header">
		<!-- TOP HEADER -->
		<div id="top-header">
			<div class="container">
				<ul class="header-links pull-left">
					<li><a href="#"><i class="fa fa-phone"></i> +021-95-51-84</a></li>
					<li><a href="#"><i class="fa fa-envelope-o"></i> email@email.com</a></li>
					<li><a href="#"><i class="fa fa-map-marker"></i> 1734 Stonecoal Road</a></li>
				</ul>
				
				<ul class="header-links pull-right">
					<input type="hidden" th:value="${user}" disabled="disabled" style="width: 50px">
					<input type="hidden" th:value="${user}" disabled="disabled" style="width: 50px">
					<li>
						<a href="#" th:onclick="'javascript : login()'">
							<i class="fa fa-user-o"></i>
							<span th:text="${user} eq null?登录 : ${user}"></span>
						</a>
					</li>
					<li><a href="#"><i class="fa fa-bell-o"></i> 系统通知</a></li>
					<li><a href="#"><i class="fa fa-list"></i> 我的订单</a></li>
				</ul>
			</div>
		</div>
		<!-- /TOP HEADER -->

		<!-- MAIN HEADER -->
		<div id="header">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					
					<!-- LOGO -->
					<div class="col-md-3">
						<div class="header-logo">
							<a href="#" class="logo">
								<img src="static/img/logo.png" alt="">
							</a>
						</div>
					</div>
					<!-- /LOGO -->

					<!-- SEARCH BAR -->
					<div class="col-md-6">
						<div class="header-search">
							<form>
									<select class="input-select">
										<option value="0">全部</option>
										<option value="1">店铺</option>
										<option value="1">产品</option>
									</select>
									<input class="input" placeholder="Search here" style="width: 60%">
									<button class="search-btn">Search</button>
							</form>
						</div>
					</div>
					<!-- /SEARCH BAR -->
					<!-- ACCOUNT -->
					<div class="col-md-3 clearfix">
						<div class="header-ctn">
							<!-- Mangement -->
							<div>
								<a href="storeUrl" target="_blank">
									<i class="fa fa-leaf"></i>
									<span>店铺</span>
									<!-- <div class="qty">2</div> -->
								</a>
							</div>
							<!-- /Mangement -->
							
							<!-- Cart -->
							<div class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
									<i class="fa fa-shopping-cart"></i>
									<span>购物车</span>
									<div class="qty">3</div>
								</a>
								<div class="cart-dropdown" style="background-color: white;">
									<div class="cart-list">
										<div class="product-widget">
											<div class="product-img">
												<img src="static/img/product01.png" alt="">
											</div>
											<div class="product-body">
												<h3 class="product-name"><a href="#">product name goes here</a></h3>
												<h4 class="product-price"><span class="qty">1x</span>$980.00</h4>
											</div>
											<button class="delete"><i class="fa fa-close"></i></button>
										</div>

										<div class="product-widget">
											<div class="product-img">
												<img src="static/img/product02.png" alt="">
											</div>
											<div class="product-body">
												<h3 class="product-name"><a href="#">product name goes here</a></h3>
												<h4 class="product-price"><span class="qty">3x</span>$980.00</h4>
											</div>
											<button class="delete"><i class="fa fa-close"></i></button>
										</div>
									</div>
									<div class="cart-summary">
										<small>3 Item(s) selected</small>
										<h5>SUBTOTAL: $2940.00</h5>
									</div>
									<div class="cart-btns">
										<a href="#">View Cart</a>
										<a href="#">Checkout  <i class="fa fa-arrow-circle-right"></i></a>
									</div>
								</div>
							</div>
							<!-- /Cart -->
							
							<!-- Menu Toogle -->
							<div class="menu-toggle">
								<a href="#">
									<i class="fa fa-bars"></i>
									<span>Menu</span>
								</a>
							</div>
							<!-- /Menu Toogle -->
						</div>
					</div>
					<!-- /ACCOUNT -->
				</div>
				<!-- row -->
			</div>
			<!-- container -->
		</div>
		<!-- /MAIN HEADER -->
		<script type="text/javascript"> 
		//初始化Spiner
		//opts 样式可从网站在线制作
        var opts = {            
            lines: 13, // 花瓣数目
            length: 20, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 30, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#000', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: '25%', // spinner 相对父容器Top定位 单位 px
            left: '50%'// spinner 相对父容器Left定位 单位 px
        };
        var spinner = new Spinner(opts);
        
        //信息输出
        function showAlert(msg){
        	$('#myAlert').modal();
        	$('#alertDiv').html(msg);
        	$('#confirm').click(function(){
        		$('#myAlert').modal('hide');
        	});
        }
		function showLoading(div){
            //请求时spinner出现
            var target = $("#"+div);
            spinner.spin(target);
        }
        function showLoading(){
            //请求时spinner出现
            spinner = new Spinner(opts);
            var target = $("#myLoading");
            spinner.spin(spinner);
        }
        function hideLoading(){
            //关闭spinner  
            spinner.spin();
        }
         	//登录触发
   		function login(){
   			 $('#myModal').modal();
   			 //showAlert("犯我中华者，虽远必诛！");
   		}
        </script>
	</header>
</body>
</html>
